import { Todo } from "@/types";
import { motion, useAnimate, usePresence } from "framer-motion";
import {useEffect} from "react";
interface TodoItemProps {
    todo: Array<Todo>,
    toggleTodo: (id: string) => void,
    deleteTodo: (id: string) => void
}


function TodoItem({ todo, toggleTodo, deleteTodo }: TodoItemProps) {
    /* const [isPresent, safeToRemove] = usePresence()
    const [scope, animate] = useAnimate()

    useEffect(() => {
        if (isPresent) {
          const enterAnimation = async () => {
            await animate(scope.current, { opacity: 1, y: 0 })
          }
          enterAnimation()
   
        } else {
          const exitAnimation = async () => {
            await animate(scope.current, { opacity: 0, y: 25 })
            safeToRemove()
          }
          
          exitAnimation()
        }
    }, [isPresent]) */
    
    return (
        <motion.li
            layout
            initial={{ opacity: 0, y: -25 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 25 }}
            className="li"
            // ref={scope}
        >
            <span className={"text"+ (todo.completed ? ' completed' : '')}>{todo.text}</span>
            <div className="btn_box">
                <button className="filter__btn" onClick={() => toggleTodo(todo.id)}>切换</button>
                <button className="filter__btn" onClick={() => deleteTodo(todo.id)}>删除</button>
            </div>
        </motion.li>
    )
}

export default TodoItem;